<template>
  <div>
      <div slot="customContent">
        <!-- start:自定义页面内容 -->
        <div>
          <el-card class="box-card">
            <h1>请刷身份证</h1>
            <el-image
            style="width: 647px; height: 596px"
            :src="zzfkUrl"
            fit="fill"
            >
            </el-image>
          </el-card>
        </div>
      </div>
    <el-dialog title='填写电话号码' :visible.sync="showPhoneNumberInput"  :before-close="handleClose">
      <el-row style="padding:0;font-size:20px;color:blue;">
        <el-col :span='10'>
          <span style="font-size:16px;color:grey;">姓名: </span><span>{{this.idInfo.Name}}</span>
        </el-col>
        <el-col :span='10'>
          <span style="font-size:16px;color:grey;">生日: </span><span>{{this.idInfo.Birthday}}</span>
        </el-col>
      </el-row>
      <el-row style="font-size:20px;color:blue;" >
        <el-col :span='10'>
          <span style="font-size:16px;color:grey;">性别: </span><span>{{this.idInfo.Sex}}</span>
        </el-col>
        <el-col :span='10'>
          <span style="font-size:16px;color:grey;">身份证: </span><span>{{this.idInfo.ID}}</span>
        </el-col>
      </el-row>
      <el-row id="phone_row">
        <el-col :span='10' :offset="5">
          <el-input v-model="PhoneNumber" autocomplete="off" placeholder='请输入手机号'>
            <template slot="prepend">手机号:</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span='10' :offset="7">
          <div class="key-pad" style="width:240px;height:300px;margin:20px 0 0 0;">
            <Keypad @OnKey="OnKey"/>
          </div>
          <!-- <div id="keypanel">
            <ul id='keyboard'>
              <li class="letter" @click="OnKey(1)">1</li>
              <li class="letter" @click="OnKey(2)">2</li>
              <li class="letter" @click="OnKey(3)">3</li>
              <li class="letter" @click="OnKey(4)">4</li>
              <li class="letter" @click="OnKey(5)">5</li>
              <li class="letter" @click="OnKey(6)">6</li>
              <li class="letter" @click="OnKey(7)">7</li>
              <li class="letter" @click="OnKey(8)">8</li>
              <li class="letter" @click="OnKey(9)">9</li>
              <li class="letter lastone" @click="OnKey(0)">0</li>
              <li class="del" @click="OnKey(-1)">删</li>
            </ul>
          </div> -->
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="OnCancel" >取 消</el-button>
        <el-button type="primary" @click="OnOk">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 刷卡图标
import zzfkUrl from '@images/zzfk/readingIdCard.png'
import { SiupoSlipPrinter, IDCardReader, IdInfo } from '@api/tools/Hardware.js'
import { Printerconf} from '@api/tools/rprinter.js'
import { ServerInvoke, 
  CheckPatientInfo_Param, 
  RegPatientInfo_Param, 
  GetPatientInfo_Param 
  } from '@api/ServerInvoke'
import { Message, MessageBox, Loading } from "element-ui"
import Keypad from '@/components/common/Keypad.vue'
export default {
  components: {
    Keypad
  },
  data() {
    return {
      /* name:"",  //姓名
      sex: "",  //性别
      id:"",  //身份证
      phone:"",  //电话 */
      PhoneNumber: "",
      zzfkUrl:zzfkUrl,  //刷卡图标
      showInputModal: false,
      showPhoneNumberInput: false,
      idReader: new IDCardReader(),
      printer: new SiupoSlipPrinter(),
      pconf: new Printerconf(),
      timerhandle: {},
      idInfo : new IdInfo(),
      qrcode : '',
      patientId : '',
    }
  },
  methods: {
        handleClose() {
        this.$confirm('确认退出建档?')
          .then(_ => {
           this.$router.push({ name: "home" });
          })
          .catch(_ => {
            return;
          });
      },
    async BeginReadID() {
      console.log('%c BeginReadeID', 'color:#01DFA5');
      if(this.destroyed) {
        return; // 防止页面关闭后 继续调用
      }
      
      ///////////////////////////// 异步写法
      try{
        /** 读身份证 */
        // await this.idReader.Open();
        
        let info = await this.idReader.Read();
        console.log("info.ID",info.ID)
        if(info.ID != '') {
          console.log("info="+info)
          this.idInfo = info;

          this.readingCompleted();
        } else {
          this.timerhandle = setTimeout(()=>this.BeginReadID(), 500);
        }
      } catch(e) {
        console.log(`%c error: ${e.message}`, 'color:red');
        MessageBox.alert(e.message, {
          confirmButtonText: "确定",
          callback: action => {
            setTimeout(() => {
              this.$router.push({ name: "home" });
            }, 500);
          }
        })
      }
    },
    readingCompleted() {
      this.showPhoneNumberInput = true;
      //this.showInputModal = true;
    },
    OnKey(num) {
      if(num != -1) {
        if(this.PhoneNumber.length < 11) {
          this.PhoneNumber += num;
        }
      } else {
        if(this.PhoneNumber.length > 1) {
          this.PhoneNumber = this.PhoneNumber.substr(0, this.PhoneNumber.length - 1);
        } else {
          this.PhoneNumber = '';
        }
      }
    },
    OnOk() {
      if(this.PhoneNumber == '') {
        MessageBox.alert('请输入手机号');
        return;
      } else if(this.PhoneNumber.length < 11) {
        MessageBox.alert('请输入正确的手机号');
        return;
      }

      this.RegPatientInfo()
      .then(()=>{})
      .catch(e=>{
        console.log(e.message);
        MessageBox.alert(e.message, {
          confirmButtonText: "确定",
          callback: action => {
            setTimeout(() => {
              this.$router.push({ name: "home" });
            }, 500);
          }
        });
      });
    },
    OnCancel() {
      this.$router.push({ name: "home" })
    },
    async RegPatientInfo() {
      const loading = Loading.service({
        lock: true,
        text: "开始建档...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      /** 开始建档 */
      let server = new ServerInvoke();
      let param = new RegPatientInfo_Param();
      param.idType="01"
      param.idNo= this.idInfo.ID
      param.address=this.idInfo.Address
      param.cardNo = this.idInfo.ID;
      param.nation=this.idInfo.Nation;
      param.cardType = '4';
      if(this.idInfo.Birthday.length == 8) {
        param.birthDate = this.idInfo.Birthday.substr(0, 4) 
          + this.idInfo.Birthday.substr(4, 2)
          + this.idInfo.Birthday.substr(6, 2);
      }
      param.name = this.idInfo.Name;
      param.phone = this.PhoneNumber;
      param.sex = this.idInfo.Sex == '男'? '1':'2';
      let ret = await server.RegPatientInfo(param);

      loading.close();

      if(ret.code == 0) {

        this.qrcode = ret.data.cardNo;
        this.patientId=ret.data.patientId;
        await this.Print();
        this.$notify({
          title: '提示：',
          message: '信息建档已经完成！',
          type: 'success'
        });
      } else {
        throw new Error(ret.message);
      }
    },
    async Print() {
      
      var receiptPrinterModel=this.$store.state.terminfo.terminfo.receiptPrinterModel;
        let printdata={};
        printdata.Name=this.idInfo.Name;
        printdata.patientId=this.patientId;
        printdata.qrcode=this.qrcode;
         console.log("开始打印="+receiptPrinterModel);
         await this.pconf.zzfkprint(receiptPrinterModel,this,printdata);
         this.$router.push({ name: "home"});
         }
  },
 
  mounted() {    
    var receiptPrinterModel=this.$store.state.terminfo.terminfo.receiptPrinterModel;
    if(receiptPrinterModel==="siupoprint"){
      this.printer.Open();
    }
    this.idReader.Open()
    .then(()=>this.BeginReadID())
    .catch(e=>{
      MessageBox.alert(e.message, {
        confirmButtonText: "确定",
        callback: action => {
          setTimeout(() => {
            this.$router.push({ name: "home" });
          }, 500);
        }
      });
    });
  },
  beforeDestroy() {
    this.printer.Close();
    this.idReader.Close();
    if(this.timerhandle != null) {
      clearTimeout(this.timerhandle);
      this.timerhandle = null;
    }
    this.destroyed = true;
  }
};
</script>

<style scoped>
  /* .el-row {
    padding: 0 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .el-col {
    position: relative;
    box-sizing: border-box;
    margin: 30px 0;
    width: 380px;
    text-align: center;
  } */
  #phone_row {
    margin: 25px 0 0 0;
  }

  #keypanel {
    background-color: rgb(188, 190, 192);
    width: 150px;
    height: 187px;
  }

  #keyboard {
    margin: 0 5px 0 5px;
    padding: 0;
    list-style: none;
    color: #2b587a;
  }

  #keyboard li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    border-radius: 5px;
  }

  .letter {
    margin:2px 2px 2px 2px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }

  .del {
    margin:2px 2px 2px 2px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }

  .lastone {
    margin: 2px 2px 2px 48px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    font-size: 22px;
    font-weight: bold;
  }
</style>
<style>
.el-form-item__content{
  float:left;
}

.el-icon-loading {
  font-size: 54px;
}
</style>
